
import React, { useRef } from 'react';
import { Carousel } from 'antd';
import './index.css';
import { RightOutlined, LeftOutlined } from '@ant-design/icons';

const App = () => {
  const carouselRef = useRef(null);

  const handleNext = () => {
    // 手动播放下一张图片
    carouselRef.current.next();
  };

  return (
    <div className="banner">
      <div className="wrapper">
        <Carousel autoplay ref={carouselRef}>
          <div>
            <img src={require('../../../../static/image/banner1.jpg')} alt="" />
          </div>
          <div>
            <img src={require('../../../../static/image/banner2.jpg')} alt="" />
          </div>
          <div>
            <img src={require('../../../../static/image/banner3.jpg')} alt="" />
          </div>
          <div>
            <img src={require('../../../../static/image/banner4.png')} alt="" />
          </div>
        </Carousel>

        {/* 侧导航 */}
        <div className="aside">
          <ul>
            {/* 侧导航内容 */}
            <li><a href="#">男装<span>户外运动</span><RightOutlined className='icon_right' /></a></li>
            <li><a href="#">女装<span>内衣</span><RightOutlined className='icon_right' /></a></li>
            <li><a href="#">女鞋<span>男鞋 箱包</span><RightOutlined className='icon_right' /></a></li>
            <li><a href="#">手机<span>数码 电脑办公</span><RightOutlined className='icon_right' /></a></li>
            <li><a href="#">零食<span>茶酒 进口食品</span><RightOutlined className='icon_right' /></a></li>
            <li><a href="#">生鲜水果<span></span><RightOutlined className='icon_right' /></a></li>
            <li><a href="#">大家电<span>生活电器</span><RightOutlined className='icon_right' /></a></li>
            <li><a href="#">家具<span>灯具 卫浴</span><RightOutlined className='icon_right' /></a></li>
            <li><a href="#">汽车<span>配件 用品</span><RightOutlined className='icon_right' /></a></li>
            <li><a href="#">家纺<span>家饰 宠物</span><RightOutlined className='icon_right' /></a></li>
            <li><a href="#">厨具<span>收纳 鲜花</span><RightOutlined className='icon_right' /></a></li>
          </ul>
        </div>

        {/* <div className="arrow arrow-left">
          <LeftOutlined />
        </div> */}
        <div className="arrow arrow-right">
          <RightOutlined onClick={handleNext} />
          {/* <RightOutlined></RightOutlined> */}
        </div>
      </div>
    </div>
  );
}

export default App;
